﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="/resource/js/webuploader-0.1.5/webuploader.css">    
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">风格管理</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
	            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
	            <li><a href="#">Dashboard</a></li>
	            <li class="active">Current page</li>
	        </ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
			    <div class="panel-body table-responsive">
					<div class="row" style="margin-bottom:5px;padding-bottom:100px;">
						<div class="col-md-2 theme-box" th:each="item : ${themes}">
                            <div class="theme-img">
                            	<img th:src="${item.themeImg}" />
                            </div>
                            <div class="theme-text" th:text="${item.themeName}" th:if="${item.status} eq '0'"></div>
                            <div class="theme-text" th:text="${item.themeName} + '（当前主题）'" th:if="${item.status} eq '1'"></div>
                            <div class="theme-text">
                            	<div class="btn-group">
	                            	<button data-toggle="dropdown" class="btn btn-primary btn-addon btn-sm dropdown-toggle"><i class="fa fa-cog"></i>主题设置 <span class="caret"></span></button>
									<ul class="dropdown-menu">
										<li>
											<a th:href="@{'/admin/theme/updateStatus?id=' + ${item.id} + '&status=1'}" th:if="${item.status} eq '0'">启用</a>
										</li>
										<li th:if="${item.themePath != 'default'}"><a href="javascript:void(0)" data-toggle="modal" th:onclick="'javascript: confrimRemove(\''+${item.id}+'\')'">删除</a></li>
									</ul>
								</div>
                            </div>
                        </div>
                        <div class="col-md-2 theme-box">
                        	<a href="javascript:void(0)" data-toggle="modal" th:onclick="'javascript: openUploadDialog()'">
	                            <div class="theme-img">
	                            	<img src="/resource/img/theme-plus.png" data-toggle="modal"  />
	                            </div>
	                            <div class="theme-text" data-toggle="modal">上传主题包</div>
                            </a>
                        </div>
                    </div>
			    </div>
			</section>
		</div>
	</div>
	<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="upload-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
                    	<div class="alert alert-block alert-danger">
	                        <strong>注意!</strong> 如果之前已经上传过同名的主题，则会覆盖.
	                    </div>
                    	<form class="col s12" id="form1" th:action="@{/admin/theme/add}" method="post">
                    		<input name="themePath" id="themePath" type="hidden" />
							<div id="uploader" class="wu-example">
							    <div class="btns">
							        <div id="picker">选择文件...</div>
							    </div>
							</div>
						</form>
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="save();">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
						<h4 class="modal-title">您确定要删除该记录吗？</h4>
						<input type="hidden" id="cacheID" />
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
                    	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- jQuery 2.0.2 -->
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
	<script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- iCheck -->
    <script src="/resource/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
    <script type="text/javascript" src="/resource/js/jQueryMessage/js/jquery.plugin.message.js"></script>
	<script type="text/javascript">
	    function initUploader(picker,inputEl){
	    	var uploader = WebUploader.create({
	    		auto: true,
		        // swf文件路径
		        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
		        // 文件接收服务端。
		        server: '/upload/uploadFile',
		        // 选择文件的按钮。可选。
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '#' + picker,
		        fileNumLimit: 1,
		        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		        resize: false,
		        accept: {
	                title: '',
	                extensions: 'zip',
	                mimeTypes: '.zip'
	            }
		    });
	    	uploader.on('fileQueued', function(file) {
	    		
	    	});
		    uploader.on('uploadSuccess', function(file, response) {
		    	console.log(response);
		    	$("#themePath").val(response.data.filepath);
		    });
		    uploader.on('uploadError', function( file ) {
		    	$("body").MessageBox({
					type: 'error',
					message: '上传失败！',
					timeout:3000,
					callbak:null
				});
		    });
	    }
	    
	    $(document).ready(function () {
	    	$("#upload-dialog").on('shown.bs.modal',function(){
		    	initUploader("picker","filepath");
			});
	    });
		function openUploadDialog(){
			$("#upload-dialog").modal();
		}
		
		function save(){
			var themePath = $("#themePath").val();
			if(themePath == null || themePath == "" || themePath == "undefined"){
				return;
			}
			$("#form1").submit();
		}
		
		function confrimRemove(id){
			$("#remove-dialog").modal();
			$("#cacheID").val(id);
		}
		
		function remove(){
			var currentID = $("#cacheID").val();
			window.location.href="/admin/theme/delete?id="+currentID;
			$("#remove-dialog").modal('hide');
		}
	</script>
</body>
</html>
